import { cn } from '@/lib/utils'
import { HTMLProps, forwardRef } from 'react'

export type SurfaceProps = HTMLProps<HTMLDivElement> & {
    withShadow?: boolean
    withBorder?: boolean
}

export const Surface = forwardRef<HTMLDivElement, SurfaceProps>(
    ({ children, className, withShadow = true, withBorder = true, ...props }, ref) => {
        const surfaceClass = cn(
            className,
            'bg-white rounded-lg dark:bg-black',
            withShadow ? 'shadow-sm' : '',
            withBorder ? 'border border-gray-200' : '',
        )

        return (
            <div className={surfaceClass} {...props} ref={ref}>
                {children}
            </div>
        )
    },
)

Surface.displayName = 'Surface'
